<script setup>
import { ref, onMounted, watch } from "vue"
import { ElMessage } from "element-plus"
import userApi from '@/api/user_api.js'

// 申请表单数据
const applicationForm = ref({
  real_name: '',
  gender: '',
  driver_license: '',
  car_model: '',
  car_color: '',
  car_brand: '',
  car_number: ''
})

// 当前用户信息
const currentUser = ref({})

// 是否已提交申请
const isApplied = ref(false)

// 表单引用
const formRef = ref()

// 提交司机申请
const submitApplication = async () => {
  if (!applicationForm.value.real_name ||
      !applicationForm.value.driver_license ||
      !applicationForm.value.car_model ||
      !applicationForm.value.car_number) {
    ElMessage.warning('请填写必填信息')
    return
  }

  try {
    // 获取当前用户ID（实际项目中应从store或token中获取）
    const userId = localStorage.getItem('userId') || 1

    // 获取用户当前信息
    const userInfo = await userApi.getUserById(userId)

    // 更新用户信息
    const updateData = {
      id: userId,
      real_name: applicationForm.value.real_name,
      gender: applicationForm.value.gender,
      driver_license: applicationForm.value.driver_license,
      driver_apply_status: 1, // 申请待审批
      // 这里简化处理，实际应该有车辆管理模块
      role: userInfo.data?.role || '普通用户'
    }

    const result = await userApi.updateUser(updateData)

    if (result && (result.code === 200 || !result.code)) {
      ElMessage.success('司机申请已提交，等待管理员审批')
      isApplied.value = true
    } else {
      ElMessage.error(result.msg || '申请提交失败')
    }
  } catch (error) {
    console.error('提交申请出错:', error)
    ElMessage.error('申请提交失败，请稍后重试')
  }
}

// 页面加载完成后执行
onMounted(async () => {
  // 实际项目中应该从store或token中获取当前用户信息
  try {
    const userId = localStorage.getItem('userId') || 1
    const userInfo = await userApi.getUserById(userId)

    if (userInfo && (userInfo.code === 200 || !userInfo.code)) {
      currentUser.value = userInfo.data || {}

      // 如果已经申请过
      if (currentUser.value.driver_apply_status && currentUser.value.driver_apply_status > 0) {
        isApplied.value = true
        applicationForm.value.real_name = currentUser.value.real_name || ''
        applicationForm.value.gender = currentUser.value.gender || ''
        applicationForm.value.driver_license = currentUser.value.driver_license || ''
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
})
</script>

<template>
  <div class="driver-application-container">
    <h2>司机申请</h2>

    <el-alert
        v-if="isApplied"
        title="您已提交司机申请，请等待管理员审批"
        type="warning"
        show-icon
        style="margin-bottom: 20px;"
    />

    <el-card class="application-form-card">
      <el-form
          ref="formRef"
          :model="applicationForm"
          label-width="100px"
          label-position="left"
          :disabled="isApplied"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="真实姓名" prop="real_name" required>
              <el-input
                  v-model="applicationForm.real_name"
                  placeholder="请输入真实姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender" required>
              <el-select
                  v-model="applicationForm.gender"
                  placeholder="请选择性别"
                  style="width: 100%"
              >
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="驾驶证号" prop="driver_license" required>
              <el-input
                  v-model="applicationForm.driver_license"
                  placeholder="请输入驾驶证号"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider>车辆信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车辆品牌" prop="car_brand">
              <el-input
                  v-model="applicationForm.car_brand"
                  placeholder="请输入车辆品牌"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆型号" prop="car_model" required>
              <el-input
                  v-model="applicationForm.car_model"
                  placeholder="请输入车辆型号"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车辆颜色" prop="car_color">
              <el-input
                  v-model="applicationForm.car_color"
                  placeholder="请输入车辆颜色"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="car_number" required>
              <el-input
                  v-model="applicationForm.car_number"
                  placeholder="请输入车牌号"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
              v-if="!isApplied"
              type="primary"
              @click="submitApplication"
          >
            提交申请
          </el-button>
          <el-button
              v-else
              type="success"
              disabled
          >
            申请已提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="tips-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>申请说明</span>
        </div>
      </template>
      <ul>
        <li>提交申请后需等待管理员审批</li>
        <li>审批通过后，您的角色将变更为"司机"</li>
        <li>审批状态可在个人中心查看</li>
        <li>如有疑问请联系客服</li>
      </ul>
    </el-card>
  </div>
</template>

<style scoped>
.driver-application-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.application-form-card {
  margin-bottom: 20px;
}

.tips-card ul {
  padding-left: 20px;
}

.tips-card li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.card-header {
  font-weight: bold;
}
</style>
